<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen">
                <!-- 玩家: 小白 分数: 1860</br>
                比赛场次: 23 获胜场次: 18 -->
            </div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";//向host发送websocket请求连接
        var ws_hdl = null;//websocket连接的句柄

        window.onbeforeunload = function(){
            ws_hdl.close();
        }//当页面被关闭后，断开websocket连接(稳一手的操作，实际断开页面后，websocket连接也是会断开的，我们这里保守一些)

        //按钮有两个状态: 没有进行匹配的状态，正在匹配中的状态
        //---"开始匹配"按钮的点击事件处理:
        
        var button_flag = "stop";
        var be = document.getElementById("match-button");
        be.onclick = function(){
            if(button_flag == "stop")
            {
                //1.点击开始匹配按钮，发送匹配请求
                var req_json = {
                    optype:"match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else
            {
                //2.点击停止匹配按钮，发送停止匹配请求
                var req_json = {
                    optype:"match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }
        
        function get_user_info()
        {
            $.ajax({
                url : "userinfo",
                type : "GET",
                success: function(ret)
                {
                    //1.组织好前端要展示的用户详细信息
                    var info_html = "<p>" + "用户: " + ret.username + "  积分: " + ret.score + "</br>"
                        + "战斗总场次: " + ret.total_count + "  胜利总场次: " + ret.win_count + "</p>";
                    //2.将组织好的信息添加到前端页面中
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;//给一个指定的标签控件，再继续内嵌一个标签

                    //3.向服务器请求建立websocket长连接
                    ws_hdl = new WebSocket(ws_url);
                    //设置ws_hdl句柄产生不同事件的回调函数
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                error: function(xhr)
                {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        function ws_onopen()
        {
            console.log("websocket onopen");
        }
        function ws_onclose()
        {
            console.log("websocket onclose");
        }
        function ws_onerror()
        {
            console.log("websocket onerror");
        }
        function ws_onmessage(evt)
        {
            var resp_json = JSON.parse(evt.data);//服务器返回的json响应
            if(resp_json.result == false)
            {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }
            if(resp_json["optype"] == "hall_ready")
            {
                alert("游戏大厅连接建立成功");
            }
            else if(resp_json["optype"] == "match_start")
            {
                console.log("玩家已经加入匹配队列");
                button_flag = "start";
                be.innerHTML = "匹配中...点击按钮停止匹配!";//客户端收到服务器的正确响应之后，才会更改按钮里面的内容
                return;
            }
            else if(resp_json["optype"] == "match_stop")
            {
                console.log("玩家已经从匹配队列中移除");
                button_flag = "stop";
                be.innerHTML = "开始匹配";//客户端收到服务器的正确响应之后，才会更改按钮里面的内容
                return;                
            }
            else if(resp_json["optype"] == "match_success")//对战匹配成功
            {
                alert("对战匹配成功，进入游戏房间!");
                location.replace("/game_room.html");
                return;
            }
            else//未知请求类型，直接跳转到登陆页面
            {
                alert(evt.data);
                location.replace("/login.html");
                return;                
            }
        }
        
        get_user_info();


    </script>
</body>
</html>